import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'umi';

import html2canvas from 'html2canvas';
import './index.less';
import { Space, Table, Switch, Row, Col, Button } from 'antd';
export const sand = (props: any) => {
  const [img, setimg] = useState('');

  useEffect(() => {
    props.dispatch({ type: 'index/sand_LIST' });
    // fang_house_sand().then((res) => {
    //   console.log(res.data.RECORDS, 'res');

    //   setdata(res.data.RECORDS);
    // });
  }, []);
  const html = useRef();
  const anvasHTML = () => {
    html2canvas(html.current, {
      useCORS: true,
    }).then((canvas) => {
      const url = canvas.toDataURL();
      // console.log(url, 'url');
      setimg(url);
    });
  };
  const columns: any = [
    {
      title: '楼栋名称',
      dataIndex: 'title',
      key: 'title',
      render: (text: any) => <a>{text}</a>,
    },
    {
      title: '楼层数',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '销售状态',
      dataIndex: 'agent_id',
      key: 'agent_id',
      render: (_: any) => {
        return _ == 0 ? <span>已售</span> : <span>代售</span>;
      },
    },
    {
      title: '状态',
      key: 'status',
      dataIndex: 'status',
      render: (item: any) => {
        return (
          <Switch
            defaultChecked
            checkedChildren="正常"
            unCheckedChildren="关闭"
            onChange={(checked: any) => {
              console.log('====================================');
              console.log(checked);
              console.log('====================================');
            }}
          />
        );
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: any) => {
        return (
          <React.Fragment>
            <Row>
              <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                <Button size="small">添加</Button>
              </Col>
              <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                <Button size="small">编辑</Button>
              </Col>
              <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
                <Button
                  size="small"
                  onClick={() => {
                    props.dispatch({
                      type: 'index/house_sand_DEL',
                      payload: record,
                    });
                  }}
                >
                  删除
                </Button>
              </Col>
            </Row>
          </React.Fragment>
        );
      },
    },
  ];

  return (
    <div className="send">
      <div className="Table">
        <Table columns={columns} dataSource={props.data} />
      </div>
      <div className="html">
        <div ref={html}>
          <img
            style={{ width: 300, height: 300 }}
            src="httpS://img2.baidu.com/it/u=3202947311,1179654885&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677949200&t=badedca3bdff436f359947c494be0140"
            alt=""
          />
        </div>
        <div>
          <img style={{ width: 300, height: 300 }} src={img} alt="" />
        </div>
        <button onClick={anvasHTML}>点我绘制</button>
      </div>
    </div>
  );
};

const mapStateToProps = (state: any) => {
  // console.log('====================================');
  // console.log(state.index.fang_house_sand, 'state');
  // console.log('====================================');
  return {
    data: state.index.fang_house_sand,
  };
};

export default connect(mapStateToProps)(sand);
